<template>
  <div class="projectSchedule-container">
    <div class="header">项目进度</div>
    <div class="body">
      <!-- 项目统计 -->
      <div class="project-statistics" @click="projectListModalVisible = true">
        <div class="sub-header">项目统计</div>
        <div class="container">
          <div class="chart-unit">单位：个</div>
          <div class="border">
            <div class="value">
              {{ projectStatisticsSource.totalProNum || 0 }}
            </div>
            <div class="name">项目总数</div>
          </div>
          <div class="legend-warp">
            <div
              class="legend"
              v-for="(item, index) in statusList"
              :key="index"
              :style="{ '--bgColor': item.background }"
            >
              <div class="name">{{ item.name }}</div>
              <div class="value" :style="{ color: item.background }">
                {{ item.completionProNum || 0 }}
              </div>
              <div class="unit">个</div>
            </div>
          </div>
          <div class="chart-dom" ref="pie-chart"></div>
        </div>
      </div>
      <!-- 进度统计 -->
      <div class="progress-statistics">
        <div class="sub-header">进度统计</div>
        <div class="container">
          <!-- 项目总进度 -->
          <div class="project-schedule">
            <div class="title">
              <div class="name">项目总进度</div>
              <div class="pec">
                {{ (progressStatistics.rate || 0).toFixed(2) }}<span>%</span>
              </div>
            </div>
            <div class="schedule-warp">
              <div class="schedule-body">
                <div
                  v-for="(item, index) in 51"
                  :key="index"
                  :class="index <= activeIndex && 'active'"
                ></div>
              </div>
            </div>
          </div>
          <!-- 项目列表 -->
          <div class="project-list-warp">
            <div
              class="project-item"
              v-for="(item, index) in scheduleList"
              :key="index"
            >
              <div class="project-header">
                <div class="name" :title="item.proName">{{ item.proName }}</div>
                <div class="pec-value">{{ item.rate || 0 }}%</div>
              </div>
              <div class="pec-par">
                <div
                  class="bar"
                  :style="{ width: Number(item.rate || 0) + '%' }"
                ></div>
              </div>
              <div class="desc">
                <div class="value_1">
                  当前节点：{{ item.currentNode || "-" }}
                </div>
                <div class="value_2" @click="handleDetail(item)">
                  详情
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <projectListModal
      :visible.sync="projectListModalVisible"
    ></projectListModal>

    <!-- 项目详情 -->
    <projectDetailModal
      :visible.sync="projectDetailModal.visible"
      :dataSoucre="projectDetailModal.data"
    ></projectDetailModal>
  </div>
</template>
<script>
import echarts from "echarts";
import { axios } from "@/utils/request";
import projectListModal from "./projectListModal";
//项目详情
import projectDetailModal from "./projectDetailModal";
export default {
  data() {
    return {
      projectStatisticsSource: {},
      progressStatistics: {},
      scheduleList: [],
      activeIndex: 0,
      projectListModalVisible: false,
      statusList: [],
      projectDetailModal: {
        visible: false,
        data: {},
      },
    };
  },
  components: {
    projectListModal,
    projectDetailModal,
  },
  mounted() {
    this.getProjectStatistics();
    this.$nextTick((_) => {
      this.drawPieChart();
    });
  },
  methods: {
    handleDetail(item) {
      this.projectDetailModal.data = {
        total: this.progressStatistics.rate,
        ...item,
      };
      this.projectDetailModal.visible = true;
    },

    getRandomBrightColor() {
      // 生成随机的饱和度和亮度，保持色相为0，即红色
      var hue = 0;
      var saturation = Math.floor(Math.random() * 101); // 随机生成0到100之间的整数
      var lightness = Math.floor(Math.random() * 61) + 70; // 随机生成70到100之间的整数

      // 将HSL转换为RGB
      var h = hue / 360;
      var s = saturation / 100;
      var l = lightness / 100;

      var r, g, b;
      if (s === 0) {
        r = g = b = l; // 若饱和度为0，则rgb三个值相等
      } else {
        var hue2rgb = function hue2rgb(p, q, t) {
          if (t < 0) t += 1;
          if (t > 1) t -= 1;
          if (t < 1 / 6) return p + (q - p) * 6 * t;
          if (t < 1 / 2) return q;
          if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
          return p;
        };

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1 / 3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1 / 3);
      }

      // 将RGB转换为十六进制颜色表示
      var toHex = function toHex(c) {
        var hex = Math.round(c * 255).toString(16);
        return hex.length === 1 ? "0" + hex : hex;
      };

      var color = "#" + toHex(r) + toHex(g) + toHex(b);
      return color;
    },
    //项目统计
    getProjectStatistics() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/bigScreen/projectStatistics`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.projectStatisticsSource = data?.projectMap;
            this.statusList = data?.projectMap?.statusList ?? [];
            const colorList = [
              "#419fff",
              "#FFA145",
              "#1BF8C3",
              "#97D664",
              "#FFCF5F",
              "#EE6F7C",
              "#4346D3",
              "#FFADC4",
              "#2276FC",
              "#5FD5EC",
            ];
            this.statusList.forEach((item, index) => {
              this.$set(
                item,
                "background",
                colorList[index]
                  ? colorList[index]
                  : this.getRandomBrightColor()
              );
            });
            this.progressStatistics = data?.scheduleMap;
            this.scheduleList = data?.scheduleMap?.scheduleList ?? [];
            let rateVal = this.progressStatistics?.rate ?? 0;
            if (rateVal == 0) {
              this.activeIndex = 0;
            } else {
              if (Number(rateVal) >= 100) {
                this.activeIndex = 51;
              } else {
                this.activeIndex = Math.floor((rateVal / 100) * 51);
              }
            }
            this.drawPieChart();
            resolve();
          })
          .catch((_) => {
            this.statusList = [];
            this.projectStatisticsSource = {};
            this.progressStatistics = {};
            this.scheduleList = [];
            reject();
          });
      });
    },

    drawPieChart() {
      let { statusList } = this;
      let chartDom = this.$refs["pie-chart"];
      let myChart = echarts.init(chartDom);
      const chartData = [];
      const colorList = [];
      statusList.forEach((item) => {
        chartData.push({
          value: item?.completionProNum || 0,
          name: item.name,
        });
        colorList.push(item.background);
      });

      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
      const gap = (1 * sum) / 100;
      const pieData1 = [];
      const pieData2 = [];
      const gapData = {
        name: "",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };
      for (let i = 0; i < chartData.length; i++) {
        // 第一圈数据
        pieData1.push({
          ...chartData[i],
          itemStyle: {
            borderRadius: 10,
          },
        });
        pieData1.push(gapData);

        // 第二圈数据
        pieData2.push({
          ...chartData[i],
          itemStyle: {
            color: colorList[i],
            opacity: 0.3,
          },
        });
        pieData2.push(gapData);
      }
      let option = {
        tooltip: {
          show: false,
        },
        graphic: {
          elements: [],
        },
        grid: {
          top: 35,
          right: 30,
          bottom: 20,
          left: 30,
        },
        color: colorList,
        series: [
          {
            name: "",
            type: "pie",
            roundCap: true,
            radius: ["63%", "67%"],
            center: ["34%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: pieData1,
          },
          {
            type: "pie",
            radius: ["76%", "64%"],
            center: ["34%", "50%"],
            gap: 1.71,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            silent: true,
            data: pieData2,
          },
        ],
      };
      option && myChart.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        myChart && myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.projectSchedule-container {
  position: absolute;
  width: 400px;
  height: 100%;
  top: 0;
  left: 20px;
  box-sizing: border-box;
  padding: 110px 0 20px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header {
    height: 40px;
    flex-shrink: 0;
    background: url("~@/assets/img/portalEntry/icon_9.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    color: #eefaff;
    font-size: 18px;
    padding-left: 46px;
  }
  .body {
    flex: 1;
    border-radius: 0px 0px 0px 8px;
    border: 1px solid rgba(0, 213, 255, 0.4);
    background: rgba(5, 62, 74, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: none;
    padding: 10px 0 0 0;
    .sub-header {
      width: 372px;
      height: 28px;
      background: url("~@/assets/img/portalEntry/icon_10.png");
      background-size: 100% 100%;
      margin: 0 auto;
      box-sizing: border-box;
      color: #dcffff;
      font-size: 14px;
      padding-left: 30px;
      margin-bottom: 16px;
    }
    // 项目统计
    .project-statistics {
      .container {
        height: 250px;
        position: relative;
        .chart-dom {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
        }
        .chart-unit {
          position: absolute;
          top: -4px;
          left: 16px;
          color: #b8f3ff;
          font-size: 14px;
        }
        .border {
          width: 140px;
          height: 140px;
          border: 1px dashed rgba(184, 243, 255, 0.6);
          position: absolute;
          top: 50%;
          left: 66px;
          transform: translateY(-50%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          .value {
            color: #f2fdff;
            font-size: 24px;
            font-weight: bold;
          }
          .name {
            color: #b8f3ff;
            font-size: 14px;
          }
        }
        .legend-warp {
          position: absolute;
          display: flex;
          flex-direction: column;
          top: 50%;
          transform: translateY(-50%);
          left: 250px;
          .legend {
            display: flex;
            align-items: center;
            color: #b8f3ff;
            font-size: 14px;
            &::before {
              display: flex;
              content: "";
              width: 16px;
              height: 10px;
              background: var(--bgColor);
              margin-right: 6px;
              margin-top: 4px;
            }
            .name {
              margin-right: 6px;
              margin-top: 4px;
            }
            .value {
              font-size: 24px;
            }
            .unit {
              margin-top: 4px;
            }
          }
        }
      }
    }
    // 进度统计
    .progress-statistics {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .container {
        flex: 1;

        overflow: hidden;
        display: flex;
        flex-direction: column;
        .project-schedule {
          display: flex;
          padding: 0 16px;
          flex-direction: column;
          align-items: center;
          .title {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding-bottom: 6px;
            .name {
              color: #b8f3ff;
            }
            .pec {
              color: #1bf7c3;
              font-size: 18px;
              font-weight: bold;
              span {
                font-size: 14px;
                font-weight: bold;
              }
            }
          }
          .schedule-warp {
            width: 368px;
            height: 30px;
            background: url("~@/assets/img/portalEntry/zongjindu.png");
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 5px 9px;
            .schedule-body {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              div {
                height: 100%;
                width: 4px;
                background: rgba(27, 248, 195, 0.2);
                &.active {
                  background: #1bf8c3;
                }
              }
            }
          }
        }
        .project-list-warp {
          display: flex;
          align-items: center;
          flex-direction: column;
          flex: 1;
          margin-top: 16px;
          overflow: auto;
          overflow-x: hidden;
          padding: 0 16px;
          .project-item {
            width: 368px;
            height: 90px;
            margin-bottom: 16px;
            background: url("~@/assets/img/portalEntry/jindu.png");
            background-size: 100% 100%;
            flex-shrink: 0;
            box-sizing: border-box;
            padding: 0 16px;
            overflow: hidden;
            .project-header {
              display: flex;
              font-size: 16px;
              justify-content: space-between;
              padding-top: 10px;
              overflow: hidden;
              .pec-value {
                color: #00ffff;
              }
              .name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-right: 10px;
              }
            }
            .pec-par {
              width: 336px;
              height: 8px;
              background: rgba(77, 107, 130, 0.6);
              margin: 8px 0;
              overflow: hidden;
              .bar {
                height: 100%;
                width: 0;
                background: linear-gradient(90deg, #00ffff, #0063b0);
                transition: 0.3s;
                transition-delay: 0.5s;
              }
            }
            .desc {
              display: flex;
              font-size: 14px;
              justify-content: space-between;
              .value_1 {
                display: flex;
                align-items: center;
                &::before {
                  display: flex;
                  content: "";
                  width: 16px;
                  height: 13px;
                  margin-right: 8px;
                  background: url("~@/assets/img/portalEntry/t_icon_3.png");
                  background-size: 100% 100%;
                }
              }
              .value_2 {
                cursor: pointer;
                width: 60px;
                height: 26px;
                background: url("~@/assets/img/portalEntry/t_icon_4.png");
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>
